<template>
    <div>
        <h1>父亲组件</h1>
        <p>${{ money }}</p>
        <p>{{ msg }}</p>
        <p><button @click="changePar">修改父中的money变量</button></p>
    </div>
    <hr>
    <GrandSon />
</template>
<script setup>
import GrandSon from './grandSon.vue'

// 2.使用defineProps({变量1,变量2...})
const props = defineProps({
    // money:Number
    money: {
        type: Number,
        default: 100
    },
    msg: String
})

// 只读不允许直接修改父组件传过来的值
// props.money=1e8

// 通过子传父修改


console.log('js使用父传子的变量:', props, props.money, props.msg)

// 2.使用defineEmits声明自定义事件,获取emit方法
// emit 等价于 this.$emit
const emit = defineEmits(['change-money'])

const changePar = () => {
    emit('change-money', 1e8)
}

</script>

<style scoped></style>